<!-- 已经审批需求详情展示 -->
<template>
    <div>
        <!-- 基本信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>基本信息</span>
                </div>
            </div>
            <div class="content">
                <div class="one">
                    <div class="first">
                        <span class="name">需求编号：</span>
                        <span class="con">{{ details.id }}</span>
                    </div>
                    <div class="first">
                        <span class="name">需求名称：</span>
                        <span class="con">{{ details.demandName }}</span>
                    </div>
                    <div class="first">
                        <span class="name">申请人：</span>
                        <span class="con">{{ details.realName }}</span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">申请部门：</span>
                        <span class="con">{{ details.deptName }}</span>
                    </div>
                    <div class="first">
                        <span class="name">创建时间：</span>
                        <span class="con">{{ details.createTime }}</span>
                    </div>
                </div>
                <div class="desc">
                    <span class="name">需求描述：</span>
                    <span class="con">{{ details.demandDesc }}</span>
                </div>
                <div class="desc">
                    <span class="name">附件：</span>
                    <div v-for="item of fileEntityList" :key="item.fileId" class="text">
                        <el-link :href="item.downloadPath">{{ item.fileName }}</el-link>
                    </div>
                </div>
                <span class="divider" />
                <div class="statue">
                    <span class="name">是否对外开放：<el-tag :type="openStatus()" effect="dark" size="small">{{ details.isOpen === true ? '已开放' : '未开放' }}</el-tag></span>
                </div>
            </div>
        </div>
        <!-- 部审信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>部审信息</span>
                </div>
            </div>
            <div class="content">
                <div class="one">
                    <div class="first">
                        <span class="name">部门审批人：</span>
                        <span class="con">{{ details.deptApprover }}</span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">部门审批意见：</span>
                        <span class="con">{{ details.deptRemark }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 终审信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>终审信息</span>
                </div>
            </div>
            <div class="content">
                <div class="one">
                    <div class="first">
                        <span class="name">是否通过：
                            <el-tag :type="passStatus(1)" effect="dark" size="small">{{ passStatusType }}</el-tag>
                        </span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">审批意见：</span>
                        <span class="con">{{ details.remark }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ApprovePassDetails',
    data() {
        return {
            details: {},
            passStatusType: '',
            fileEntityList: []
        }
    },
    created() {
        this.details = this.$route.query // 获取基本信息数据
        this.details.isOpen = this.$route.query.isOpen === 'true' // 数据类型转换
        this.fileEntityList = this.$route.query.fileEntityList // 获取文件数据做转换
        this.passStatusType = this.passStatus(2) // 终审状态
        setTimeout(() => { // 页面刷新
            this.$forceUpdate()
        }, 200)
    },
    methods: {
        openStatus() { // 是否对外开放
            return this.details.isOpen === false ?  'info' : 'success'
        },
        passStatus(type) { // 判断终审状态是否通过
            if (this.details.isPass === -1 || this.details.isPass === '-1') {
                return type === 1 ? 'warning' : '正在审批'
            }
            if (this.details.isPass === 0 || this.details.isPass === '0') {
                return type === 1 ? 'info' : '已驳回'
            }
            if (this.details.isPass === 1 || this.details.isPass === '1') {
                return type === 1 ? 'success' : '已通过'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
    align-items: center;
}
.one {
    display: flex !important;
}
.name {
    min-width: 62px;
    color: #888;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}
.desc {
    display: flex;
    margin-left: 20px;
    margin-bottom: 25px;
}
.divider {
    display: block;
    border-bottom: solid 1px #f3f3f3;
}
.title {
    margin-left: 20px;
}
.statue {
    margin-left: 20px;
    padding-bottom: 15px;
    margin-top: 15px;
}
.con {
    font-size: 14px;
}
i {
    font-style: normal;
}
.text {
    font-size: 14px;
}
</style>
